<template>
  <div class="four">
    <div class="centeras">
    <div class="left">
        <el-carousel indicator-position="outside">
            <el-carousel-item v-for="(item,index) in itemsrc" :key="index">
              <img :src="item.src" alt="" style="dispaly:block;">
            </el-carousel-item>
          </el-carousel>
    </div>
    <div class="right">
        <div class="xwzx">
            <h3><a href="" target="_blank">新闻中心</a></h3>
            <span><a href="" target="_blank">更多>></a></span>
        </div>
        <ul class="rightul">
            <li style="margin-top:6px;"><svg class="icon" aria-hidden="true" style="font-size:40px;">
                <use xlink:href="#icon-lvsejiaoyu-"></use>
              </svg><a href="" target="_blank">杨振海到加攻速调研科技支撑乡村产业振兴情况111111111111111111111111111111111111111111111111111111111111111111111111111111</a><span>05-05</span></li>
              <li><svg class="icon" aria-hidden="true" style="font-size:16px;margin-top:13px;" target="_blank">
                <use xlink:href="#icon-lvsejiaoyu-"></use>
              </svg><a href="" style="margin-right:85px" target="_blank">杨振海到加攻速调研科技支撑乡村产业振兴情况 </a><span>05-05</span></li>
              <li><svg class="icon" aria-hidden="true" style="font-size:16px;margin-top:13px">
                <use xlink:href="#icon-lvsejiaoyu-"></use>
              </svg><a href="" style="margin-right:85px" target="_blank">杨振海到加攻速调研科技支撑乡村产业振兴情况</a><span>05-05</span></li>
              <li><svg class="icon" aria-hidden="true" style="font-size:16px;margin-top:13px">
                <use xlink:href="#icon-lvsejiaoyu-"></use>
              </svg><a href="" style="margin-right:85px" target="_blank">杨振海到加攻速调研科技支撑乡村产业振兴情况</a><span>05-05</span></li>
              <li><svg class="icon" aria-hidden="true" style="font-size:16px;margin-top:13px">
                <use xlink:href="#icon-lvsejiaoyu-"></use>
              </svg><a href="" style="margin-right:85px" target="_blank">杨振海到加攻速调研科技支撑乡村产业振兴情况</a><span>05-05</span></li>
              <li><svg class="icon" aria-hidden="true" style="font-size:16px;margin-top:13px">
                <use xlink:href="#icon-lvsejiaoyu-"></use>
              </svg><a href="" style="margin-right:85px" target="_blank">杨振海到加攻速调研科技支撑乡村产业振兴情况</a><span>05-05</span></li>
              <li><svg class="icon" aria-hidden="true" style="font-size:16px;margin-top:13px">
                <use xlink:href="#icon-lvsejiaoyu-"></use>
              </svg><a href="" style="margin-right:85px" target="_blank">杨振海到加攻速调研科技支撑乡村产业振兴情况</a><span>05-05</span></li>
              <li><svg class="icon" aria-hidden="true" style="font-size:16px;margin-top:13px">
                <use xlink:href="#icon-lvsejiaoyu-"></use>
              </svg><a href="" style="margin-right:85px" target="_blank">杨振海到加攻速调研科技支撑乡村产业振兴情况</a><span>05-05</span></li>
        </ul>
    </div>
    </div>
  </div>
</template>

  <script >
   export default {
        data() {
            return {
                itemsrc:[
                {src:require('../image/1.jpg'),},
                {src:require('../image/2.jpg'),},
                {src:require('../image/3.jpg'),},
                {src:require('../image/4.jpg'),},
               ]
            };
        },
   }

</script>
  <style scoped>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .rightul {
    width: 539px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rightul span{
    padding-left: 35px;
  }
  .rightul li a{
      white-space: nowrap;
      overflow: hidden;
    text-decoration: none;
    color: black;
      text-overflow: ellipsis;
      margin-left: 5px;
      font-size: 16px;
  }
  .rightul li {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .xwzx{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom:1px solid #6e6e6e;
  }
  .xwzx h3 {
    text-decoration: none;
    color: rgb(51,51,51);
    border-bottom:2px solid #069564 ;
  }
  .xwzx h3 a{
    display: block;
    height: 40px;
    font-size: 20px;
    text-decoration: none;
    color: rgb(51,51,51);
  }
  .xwzx span a{
    text-decoration: none;
    color: black  ;
  }
  .right{
   
    width: 539px;
    height: 371px;
    margin-top: 13px;
    padding-left: 10px;
}
  .left{
    width: 661px;
    height: 371px;
    margin-top: 15px;
  }
  .centeras{
    display: flex;
    width: 1200px;
    margin: 0 auto;
  }
 
  /deep/.el-carousel__container { 
    width: 661px ;
    height: 371px ;
  }

.el-carousel__item img{
    width: 100%;
    height: 100%;
}
/deep/.el-carousel__indicators--horizontal {
    position: absolute;
    left: auto;
    margin-left: 10px;
    right: 10px;
    bottom: 10px;
    text-align: right;
}
   /deep/ .el-carousel__indicator--horizontal button {
        width: 18px;
        height: 18px;
        background: rgb(0, 123, 57);
        border-radius: 50%;
        opacity: 0.5;
    }

    /deep/.el-carousel__indicator--horizontal.is-active button {
        width: 34px;
        height: 18px;
        background: rgb(33,85,47);
        border-radius: 20px;
    }



</style>